<template>
	<view class="repair-wrap">
		<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;padding-bottom: 10rpx;">

			<view class="image-bottom">
				<!-- <h3>选择分类</h3> -->
				<view class="repair-box" style="padding: 10px 0 0;">
					<view class="repair-box-center" style="display: flex;margin-left: -36rpx;">
						<!-- <view class="title-weight">选择分类:</view> -->
						<button class="button"
							:style="ruleFrom.type_classification == 3?'background: linear-gradient(180deg, #76D904 0%,#417505 100%); color:#ffffff':null"
							@click="selectType(1)">心情</button>
						<button class="button"
							:style="ruleFrom.type_classification == 1?'background: linear-gradient(180deg, #76D904 0%,#417505 100%); color:#ffffff':null"
							@click="selectType(2)">报事</button>
						<button class="button"
							:style="ruleFrom.type_classification == 2?'background: linear-gradient(180deg, #76D904 0%,#417505 100%); color:#ffffff':null"
							@click="selectType(3)">公区报修</button>

					</view>
					<view class="repair-event-txt">
						<view class='guar-text'>
							<!-- 1 请发表您此刻要分享的心情! 2 此报修/报事内容将会在本小区随手拍进行展示，同时会上报给物业公司 -->
							<textarea maxlength='-1' v-model.trim="ruleFrom.photo_remarks" type="textarea"
								:placeholder="placeholderTxt" />
						</view>
					</view>
				</view>
				<view class="header-li" v-if="ruleFrom.type_classification != 3">
					<view style="width: 98px;">
						<view class="title-weight" style="margin-top: -6rpx;">
							<text style="color: red;">*</text>
							具体位置:</view>
					</view>
					<view class="input1">
						<u-input placeholder="例如:三号楼一单元南侧第一个路灯" v-model="ruleFrom.building_location" />
					</view>
				</view>
				<view class="header-li" v-if="ruleFrom.type_classification != 3">
					<view style="width: 98px;">
						<view class="title-weight" style="margin-top: -4rpx;">地图定位:</view>
					</view>
					<view class="input1" style="display: flex;align-items: center;" @click="positionFun">
						<view class="location-status">{{addressName?addressName:'未定位'}}</view>
						<!-- <img class="map-location" @click="positionFun" src="./location.png"> -->
						<u-icon class="map-location" name="map"></u-icon>
						<!-- <u-input @click="positionFun" disabled placeholder="请选择位置"
							v-model="ruleFrom.positioning_position" /> -->
					</view>
				</view>
				<!-- 地图预览暂时去掉 -->
				<!-- 				<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					v-if="ruleFrom.type_classification != 3">
				</map> -->
				<view>
					<view class="header-li1" v-if="ruleFrom.type_classification != 3">
						<view style="display: flex;">
							<view style="width: 151px;">
								<view class="title-weight">是否对外匿名发布:</view>
							</view>
							<radio-group @change="clapradio">
								<view class="radio-wrap">
									<label class="radio radio-wrap-center">
										<radio color="#4c800f" value="1" checked="true" style="transform:scale(0.7)" />
										<text style="color: #000;font-size: 14px;">否</text>
									</label>
									<label class="radio1 radio-wrap-center">
										<radio color="#4c800f" value="2"
											style="transform:scale(0.7);margin-left: 20px;" />
										<text style="color: #000;font-size: 14px;">是</text>
									</label>
								</view>
							</radio-group>
						</view>
						<view class="repair-tip">
							提示：如果选定“是”此信息对外不会展示您的个人信息,但是物业公司可以看到您的个人信息。
						</view>
					</view>
				</view>
				<view class="header-li">
					<view class="header-upload-img">
						<!-- <view class="title-weight">图片:</view> -->
						<view @click="uoloadHouse" class="guarn-box-img" v-if="imgArr.length<3">
							<text style="color: red;" v-show="ruleFrom.type_classification != 3">*</text>
							<image class="guarn-box-uplod_img" src="../../static/image/upload_images.png" mode="">
							</image>
							<view class="guarn-box-uplod">点击上传图片</view>
							<view class="header-upload-txt">
								（限3张,请勿选择原图）
							</view>
						</view>
					</view>
				</view>

				<view style="display: flex;">
					<view class="guarn-box guarn-box2" v-if="imgArr.length>0">
						<view class="guarn-box2-img" v-for="(item,index) in imgArr">
							<image mode="aspectFill" @click="preview(item,index,imgArr)" :src="item"></image>
							<!-- 		<u-icon @click="colseImg(item)" name="close" color="red" size="40"
								class="guarn-box2-img-close"></u-icon> -->

							<image class="close" @click="cancelImg(item,index)" src="../../static/image/clear.png">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 30px;padding-bottom: 20px;">
			<button class="yilingqu" @click="submit()" :disabled="confirm">确认发布</button>
		</view>
	</view>
	</view>
</template>
<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
import { log } from '../../js_sdk/hhyang-uni-simple-router/helpers/warn';
	export default {
		data() {
			return {
				type: 1,
				index: 0,
				array: ['分类', '分类二'],
				inday: 0,
				placeholderTxt: '请发表您此刻要分享的心情!',
				indexList: true,
				ruleFrom: {
					building_location: null, //楼宇位置
					positioning_position: null, //地图定位位置
					photo_remarks: null, //备注
					first_photo: null, //第一张照片
					second_photo: null, //第二张照片
					the_third_photo: null, //第三张照片
					type_classification: 3, //类型分类:1、报事，2、公区报修，3、心情 
					privacy_classification: '1', //隐私分类:1、公开，2、匿名发布，3、问题隐私、4、个人信息隐私，5、私发物业处理
					user_id: null,
					room_id: null
				},
				imgArr: [], //上传照片
				classification: [{
						id: 1,
						name: '公开',
					},
					{
						id: 2,
						name: '匿名发布',
					},
					{
						id: 3,
						name: '问题隐私',
					},
					{
						id: 4,
						name: '个人信息隐私',
					},
					{
						id: 5,
						name: '私发物业处理',
					},
					{
						id: 6,
						name: '需要物业公司处理',
					},
				],
				//地图
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 1,
					width: 100,
					height: 100,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/index/tbdw.png'
				}],
				addressName: '',
				indexS: null,
				confirm: false,
			}
		},
		mounted() {
			//默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.covers[0].latitude = res.latitude;
					this.covers[0].longitude = res.longitude;
				}
			});

		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		onLoad(options) {
			if (options.type) {
				this.selectType(3)
			}
		},
		methods: {
			cancelImg(item, index) {
				console.log(item, '=====')
				this.imgArr.splice(index, 1)
			},
			// 图片预览
			preview(item, indexs, imgarrs) {
				var imgarr = []
				for (let i = 0; i < imgarrs.length; i++) {
					imgarr.push(imgarrs[i])
				}
				uni.previewImage({
					urls: imgarr,
					current: indexs,
				});
			},
			//分类选择事件
			selectType(type) {
				this.ruleFrom.photo_remarks = null;
				//type 1心情 2报事 3公区报修
				if (type == 1) {
					this.ruleFrom.type_classification = 3;
					this.placeholderTxt = '请发表您此刻要分享的心情!';
				} else if (type == 2) {
					this.placeholderTxt = '请输入报事内容'
					this.ruleFrom.type_classification = 1;
					this.addressName = null

				} else {
					this.placeholderTxt = '此输入报修内容'
					this.ruleFrom.type_classification = 2
					this.addressName = null
				}
			},
			clapradio(evt) {
				this.ruleFrom.privacy_classification = evt.detail.value
			},
			submit() {
				if (this.ruleFrom.photo_remarks == null || this.ruleFrom.photo_remarks == '') {
					uni.showToast({
						title: '请填写说明详情',
						icon: 'error'
					});
					return
				};				
				if(this.ruleFrom.type_classification != 3){
					if(this.imgArr.length == 0){
						uni.showToast({
							title: '请上传图片',
							icon: 'error'
						});
						return
					}else{
						this.imgArr.forEach((item, index) => {
							if (index == 0) {
								console.log(122, index, item)
								this.ruleFrom.first_photo = item;
							}
							if (index == 1) {
								this.ruleFrom.second_photo = item;
							}
							if (index == 2) {
								this.ruleFrom.the_third_photo = item;
							}
						})
					}
				}else{
					this.imgArr.forEach((item, index) => {
						if (index == 0) {
							console.log(122, index, item)
							this.ruleFrom.first_photo = item;
						}
						if (index == 1) {
							this.ruleFrom.second_photo = item;
						}
						if (index == 2) {
							this.ruleFrom.the_third_photo = item;
						}
					})
				}
				
				
				//心情隐私默认为公开
				if (this.ruleFrom.type_classification == 3) {
					this.ruleFrom.privacy_classification = 1;
				}
				
				// if(this)
				//报事报修判断
				if (this.ruleFrom.type_classification != 3) {
					if (!this.ruleFrom.building_location) {
						uni.showToast({
							title: '请填写具体位置',
							icon: 'error'
						});
						return
					}
					// if(!this.this.addressName){
					// 	uni.showToast({
					// 		title: '请进行地图定位',
					// 		icon: 'error'
					// 	});
					// 	return
					// }
					/* if (this.imgArr.length == 0) {
						uni.showToast({
							title: '请上传照片',
							icon: 'error'
						});
						return
					} */

				}
				this.confirm = true
				let a={
					building_location: this.ruleFrom.building_location, //楼宇位置
					positioning_position: this.ruleFrom.positioning_position, //地图定位位置
					photo_remarks: this.ruleFrom.photo_remarks, //备注
					first_photo: this.ruleFrom.first_photo, //第一张照片
					second_photo: this.ruleFrom.second_photo, //第二张照片
					the_third_photo: this.ruleFrom.the_third_photo, //第三张照片
					type_classification: this.ruleFrom.type_classification, //类型分类:1、报事，2、公区报修，3、心情
					privacy_classification: this.ruleFrom
						.privacy_classification, //隐私分类:1、公开，2、匿名发布，3、问题隐私、4、个人信息隐私，5、私发物业处理
					publisher_role: 1, //1、业主，2、家属，3、租客，4、物业
					user_id: this.homelist.ownerUserId,
					room_id: this.homelist.roomId,
					longitude: this.covers[0].longitude,
					latitude: this.covers[0].latitude,
					sameCity: 1, //随手拍同城标识参数
				}
				console.log("a",a);
				this.$request.api.addData({
					building_location: this.ruleFrom.building_location, //楼宇位置
					positioning_position: this.ruleFrom.positioning_position, //地图定位位置
					photo_remarks: this.ruleFrom.photo_remarks, //备注
					first_photo: this.ruleFrom.first_photo, //第一张照片
					second_photo: this.ruleFrom.second_photo, //第二张照片
					the_third_photo: this.ruleFrom.the_third_photo, //第三张照片
					type_classification: this.ruleFrom.type_classification, //类型分类:1、报事，2、公区报修，3、心情
					privacy_classification: this.ruleFrom
						.privacy_classification, //隐私分类:1、公开，2、匿名发布，3、问题隐私、4、个人信息隐私，5、私发物业处理
					publisher_role: 1, //1、业主，2、家属，3、租客，4、物业
					user_id: this.homelist.ownerUserId,
					room_id: this.homelist.roomId,
					longitude: this.covers[0].longitude,
					latitude: this.covers[0].latitude,
					sameCity: 1, //随手拍同城标识参数
				}).then(res => {
					this.confirm = false
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'success'
						});
						//  this.ruleFrom.building_location = null, //楼宇位置
						// 	this.ruleFrom.positioning_position = null, //地图定位位置
						// 	this.ruleFrom.photo_remarks = null, //备注
						// 	this.ruleFrom.first_photo = '', //第一张照片
						// 	this.ruleFrom.second_photo = '', //第二张照片
						// 	this.ruleFrom.the_third_photo = '', //第三张照片
						// 	this.ruleFrom.type_classification = null, //类型分类:1、报事，2、公区报修，3、心情
						// 	this.ruleFrom.privacy_classification =
						// 	null, //隐私分类:1、公开，2、匿名发布，3、问题隐私、4、个人信息隐私，5、私发物业处理
						// 	this.imgArr = []
						uni.switchTab({
							url: '/pages/clap/indexclap'
						})
					} else {
						uni.showToast({
							title: '请重新检查参数！',
							icon: 'none'
						});
					}

				})
			},
			positionFun() {
				console.log("我点击了");
				uni.chooseLocation({
					success: (res) => {
						console.log("我走这个uni.chooseLocation方法了");
						console.log('位置名称: ' + res.name);
						console.log('详细地址: ' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.addressName = res.name
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.ruleFrom.positioning_position = res.address;
						this.covers[0].latitude = res.latitude;
						this.covers[0].longitude = res.longitude;
					},
					fail: (res) => {
						console.log("res", res);
					}
				});
				console.log("我选好了");
			},
			addMarkers() {
				this._mapContext = uni.createMapContext("map", this);
			},
			colseImg(val) {
				this.imgArr.splice(this.imgArr.indexOf(val), 1)
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						console.log(res,"上传图片")
						uni.showLoading({
							title: '上传中'
						});
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.imgArr.push(res.data.data);
											console.log(this.imgArr,'this.imgAr')
											// _this.ruleForm.indoor_images = res.data.data
											_this.imgFlag = false;
											uni.hideLoading();
										})
									})
								}
							})
						} else {
							uni.chooseImage({
								count: 3, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									if (res.tempFilePaths.length > 0) {
										for (let i = 0; i < res.tempFilePaths.length; i++) {
											pathToBase64(res.tempFilePaths[i]).then(res => {
												_this.$request.api.image({
													imageBase64: res
												}).then(res => {
													console.log("上传图片1",res)
													_this.imgArr.push(res.data
														.data);
													uni.hideLoading();
												})
											})
										}
										_this.imgFlag = false;
									}
								}
							});
						}
					},
					fail: function(res) {}
				});
			},
			//隐私分类选择
			classificationBtn: function(e) {
				this.index = e.target.value
				this.ruleFrom.privacy_classification = this.classification[this.index].id
			},
			checked(index) {
				this.isActive = index
			},
			newly() {
				uni.navigateTo({
					url: '/pages/clap/homepageClap'
				})
			},
			shouList() {
				this.indexList = !this.indexList
			},
		}
	}
</script>
<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.image-bottom {
			width: 90%;
			margin: 20rpx auto 2rpx;
			padding: 0 20rpx;
		}

		.title-weight {
			font-weight: bold;
			font-size: 14px;
			margin-top: 2rpx;
		}

		.repair-box {
			background: #fff;
			border-bottom: 1px solid #eee;

			.repair-box-center {
				display: flex;
				align-items: center;
			}

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.clap_box {
		width: 95%;
		margin: 0 auto;
	}

	.clap_box_img {
		width: 100%;
		margin-top: 24px;
		height: 131px;
	}

	.repair-event-txt {
		margin: 16px auto;
	}

	.guar-text textarea {
		border-radius: 8px;
		height: 100px;
		background: #fff;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
		border: 1px solid #999;
		//width: 355px;
		width: 100%;
	}

	.clap_box_imgtow {
		position: absolute;
		top: 69px;
		right: 164px
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #F9A832;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #F9A832;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		// width: 29%;
		border-radius: 5px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		color: #333333;
	}

	.header-li:nth-child(1) {
		margin-top: 20px;
	}

	.input1 {
		position: relative;
		width: 100%;
	}

	.location-status {
		margin-top: -4rpx;

	}

	.map-location {
		width: 26px;
		height: 26px;
		margin-top: -5rpx;
		margin-left: 14rpx;
		vertical-align: middl;
		// position: absolute;
		// right: 0;
		// top: 6px;
	}

	.repair-tip {
		font-size: 10px;
		color: #999;
		margin-top: 12rpx;
	}

	.header-upload-img {
		display: flex;

		.header-upload-txt {
			margin-top: 2px;
		}
	}

	.header-li1 {
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 10px 0;
	}

	.radio-wrap {
		display: flex;
	}

	.radio-wrap-center {
		display: flex;
		align-items: center;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background: #F9A832;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.guarn-box {
		width: 100%;
		height: auto;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: -10rpx;
			top: -10rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border-radius: 4rpx;
		display: flex;
		margin-right: -18px;

		.guarn-box-uplod_img {
			width: 19px;
			height: 17px;
			margin-right: 3px;
			margin-top: 28rpx;
		}

		.guarn-box-uplod {
			color: blue;
			font-weight: 700;
			margin-top: 2px;
		}
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.guar-txt-time {
		float: right;
		text-align: right;
		width: 420rpx;
	}

	.uni-textarea-placeholder {
		font-size: 13px;
	}
</style>